import React, { Component } from 'react'
import { connect } from "react-redux"
import { bindActionCreators } from 'redux'
import * as productsActions from '../store/actions/product' 
import * as cartsActions from '../store/actions/cart'

class Product extends Component {
  componentDidMount(){
    const { get_products } = this.props
    get_products()
  }
  render() {
    // console.log(this.props)
    const { products } = this.props
    const { add_product_to_cart } = this.props
    // console.log(products)

    return (
      <section className="container content-section">
        <h2 className="section-header">商品列表</h2>
        <div className="shop-items">
          {
          products.map(product => (
            <div className="shop-item" key={product.id}>
              <img className="shop-item-image" src={`http://localhost:3005/${product.thumbnail}`} />
              <span className="shop-item-title">{product.title}</span>
              <div className="shop-item-details">
                  <span className="shop-item-price">￥{product.price}</span>
                  <button className="btn btn-primary shop-item-button" 
                  onClick={() => add_product_to_cart(product.id)}  type="button">加入购物车</button>
              </div>
            </div>
          ))
          }
          
        </div>
      </section>
    )
  }
}
const mapStateToProps = state => ({
  products: state.products
})
const mapDispatchToProps = dispatch => ({
  ...bindActionCreators(productsActions, dispatch),
  ...bindActionCreators(cartsActions, dispatch)
})



export default connect(mapStateToProps, mapDispatchToProps)(Product)
